<template>
  <div class="flex flex-column " style="height: 100%">
    <div class="hm-select-area align-center bg-white font-14 hm-padding">
      <span style="margin-left: 20px;">停车场</span>
      <el-select v-model="searchObj.parking_lot_id" placeholder="请选择" class="hm-select" @change="getUserList" clearable >
        <el-option value="">全部</el-option>
        <el-option
          v-for="item in options"
          :key="item.parking_lot_id"
          :label="item.parking_lot_name"
          :value="item.parking_lot_id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">设备类别</span>
      <el-select v-model="searchObj.device_type" placeholder="请选择" class="hm-select" @change="getUserList" clearable>
        <el-option value="">全部</el-option>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">设备状态</span>
      <el-select v-model="searchObj.status" placeholder="请选择" class="hm-select" @change="getUserList" clearable>
        <el-option value="">全部</el-option>
        <el-option value="ON_LINE" label="在线"></el-option>
        <el-option value="OFF_LINE"  label="离线"></el-option>
        <el-option value="FAULT" label="故障"></el-option>
      </el-select>
        <el-button type="primary" plain @click="insertCar" style="margin-left:200px;"><span style="margin:0 30px;">添加</span></el-button>
    </div>
    <div class="home-table-area bg-white flex-sub">
      <el-row>
        <el-col :span="14">
          <span class="fontsb">全部设备:{{!!platForm.totalNum?platForm.totalNum:''}}台</span><span class="fontsb">车位锁:{{!!platForm.lockNum?platForm.lockNum:''}}台</span><span class="fontsb">监控:{{!!platForm.monitorNum?platForm.monitorNum:''}}台</span><span class="fontsb">道闸:{{!!platForm.gateNum?platForm.gateNum:''}}台</span><span class="fontsb">12寸屏:{{!!platForm.screenNum?platForm.screenNum:''}}台</span>
        </el-col>
        <el-col :span="10">
          <div class="flex float-right" >
            <el-input class="hta-input" placeholder="搜索关键字" v-model="searchObj.keywords" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" clearable @click="getUserList">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table class="home-table" :data="tableData" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
        <el-table-column type="index" width="60" label="序号">
          <template slot-scope="scope">
            <div>{{(searchObj.page - 1) * searchObj.page_num + scope.$index + 1}}</div>
          </template>
        </el-table-column>  
        <el-table-column  label="设备类别" header-align="center" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.device_type==='LOCK'">车位锁</div>
            <div v-if="scope.row.device_type==='ROAD_GATE'">道闸</div>
            <div v-if="scope.row.device_type==='SCREEN'">12寸屏幕</div>
            <div v-if="scope.row.device_type==='MONITOR'">监控</div>
          </template>
        </el-table-column>
        <el-table-column prop="device_number" label="设备编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="parking_lot_name" label="停车场" header-align="center" align="center" width="200"></el-table-column>
        <el-table-column prop="address" label="位置" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="状态" header-align="center" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 'ON_LINE'" >在线</div>
            <div v-if="scope.row.status === 'OFF_LINE'">离线</div>
            <div v-if="scope.row.status === 'FAULT'"><span class="bdcolor">故障</span></div>
            <!-- {{ scope.row.status === 'IN' ? '已绑定' : scope.row.status === 'OUT' ? '未绑定' : '未绑定' }} -->
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type='text' @click="editInfo(scope.row)">编辑</el-button>
            <el-button type='text' @click="delInfo(scope.row.device_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
        class="hm-page"
        background
        :page-size="searchObj.page_num"
        layout="prev, pager, next"
        :total="total" @current-change="sizeChange">
      </el-pagination>
    </div>
    <!--添加弹框-->
    <el-dialog
      class="font-col"
      :title="titles"
      :visible.sync="dialogVisibleInsertCar"
      width="40%"
      :before-close="handleClose">
      <el-form :model="addForm" ref="addForm" label-width="120px" >
        <el-row>
          <el-col :span="16">
            <el-form-item label="设备类别">
              <el-select v-model="addForm.device_type" placeholder="请选择" @change="equipment">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="设备编号">
              <el-input v-model="addForm.device_number" placeholder="请输入设备编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="停车场">
              <el-select v-model="addForm.parking_lot_id" placeholder="请选择" @change="parking">
                <el-option
                  v-for="item in options"
                  :key="item.parking_lot_id"
                  :label="item.parking_lot_name"
                  :value="item.parking_lot_id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>  
        <el-row v-if="isParkingLock">
          <el-col :span="16">  
            <el-form-item label="绑定车位">
              <el-select v-model="addForm.parking_place_id" placeholder="请选择">
                <el-option
                  v-for="item in optionParking"
                  :key="item.parking_place_id"
                  :label="item.parking_place_number"
                  :value="item.parking_place_id">
                </el-option>
              </el-select>
            </el-form-item>  
          </el-col>
        </el-row> 
        <el-row v-if="isRoadGate">
          <el-col :span="16">  
            <el-form-item label="绑定大门">
              <el-select v-model="addForm.gate_id" placeholder="请选择">
                <el-option
                  v-for="item in optionDooring"
                  :key="item.gate_id"
                  :label="item.gate_name"
                  :value="item.gate_id">
                </el-option>
              </el-select>
             </el-form-item>   
          </el-col>
        </el-row> 
        <el-row v-if="isMonitor">
        </el-row>
      </el-form>  
      <div class="margintop marginbottom" style="text-align: center;">
        <el-button type="primary" v-if="isAdd" @click="deterress" ><span style="margin:0 40px;">确定</span></el-button>
        <el-button type="primary" v-if="!isAdd" @click="editress" ><span style="margin:0 40px;">确定</span></el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      isParkingLock:false,
      isRoadGate:false,
      isMonitor:false,
      platForm:{
        lockNum:'',
        screenNum:'',
        gateNum:'',
        monitorNum	:'',
        totalNum:''
      },
      dialogVisibleInsertCar: false,
      isGreen: false,
      searchObj: {
        parking_lot_id:'',
        device_type:'',
        status: '',
        keywords: '',
        page: 1,
        page_num: 10,
      },
      typeOptions: [
        {
          label: '车位锁',
          value: 'LOCK'
        },
        {
          label: '道闸',
          value: 'ROAD_GATE'
        },
        {
          label: '12寸屏幕',
          value: 'SCREEN'
        },
          {
          label: '监控',
          value: 'MONITOR'
        },
      ],
      addForm:{
        device_type:'',
        device_number:'',
        parking_lot_id:'',
        parking_place_id:'',
        gate_id:''
      },
      total: 10,
      tableData: [],
      titles:'添加',
      isAdd:true,
      admin_id: '',
      options: [],
      optionParking:[],
      optionDooring:[]
    }
  },
  mounted () {
    this.admin_id = this.$store.state.adminId
    this.getparkingLotListByLoginId()
    this.getOutData()
    this.getDeviceCount()
  },
  methods: {
    // 设备类别
    equipment(val){
      if(this.addForm.parking_lot_id!==''){
        if(this.addForm.device_type === 'LOCK'){
          this.addForm.parking_place_id = ''
          this.optionParking = []
          this.device()
          this.getAllParkingPlaceList()
        }
        else if(this.addForm.device_type === 'ROAD_GATE' || this.addForm.device_type === 'SCREEN'){
          this.addForm.gate_id = ''
          this.optionDooring = []
          this.device()
          this.getGateListByParkingLotId()
        }
        else{
          this.device()
        }
      }
      else
        this.device()
      
    },
    // 设备类别车位锁出入口
    device(){
      if(this.addForm.device_type === 'LOCK'){
        this.isMonitor = false
        this.isRoadGate = false
        this.isParkingLock = true
      }  
      else if(this.addForm.device_type === 'ROAD_GATE' || this.addForm.device_type === 'SCREEN'){
        this.isMonitor = false
        this.isParkingLock = false
        this.isRoadGate = true
      }
      else if(this.addForm.device_type === 'MONITOR'){
        this.isRoadGate = false
        this.isParkingLock = false
        this.isMonitor = true
      }  
    },
    // 选择停车场
    parking(){
      if(this.addForm.parking_lot_id!==""){
        if(this.addForm.device_type === 'LOCK'){
          this.addForm.parking_place_id = ''
          this.optionParking = []
          this.getAllParkingPlaceList()
        }
        else if(this.addForm.device_type === 'ROAD_GATE' || this.addForm.device_type === 'SCREEN'){
          this.addForm.gate_id = ''
          this.optionDooring = []
          this.getGateListByParkingLotId()
        }
      }
    },
    // 获取停车场的车位
    getAllParkingPlaceList(){
      let that = this
      this.$api.allParkingPlaceList({admin_id:this.admin_id,parking_lot_id:this.addForm.parking_lot_id}).then(res=>{
        if(res.length>0){
          res.forEach(function (data) {
            if(data.is_device==="NO"){
              that.optionParking.push(data)
            }
          })
        }
      })
    },
    getGateListByParkingLotId(){
      this.$api.gateListByParkingLotId({admin_id:this.admin_id,parking_lot_id:this.addForm.parking_lot_id}).then(res=>{
        console.log(res)
        this.optionDooring = res
      })
    },
    // 设备数量
    getDeviceCount(){
      this.$api.deviceCount({admin_id:this.admin_id}).then(res=>{
        this.platForm.gateNum = res.gateNum.toString()
        this.platForm.lockNum = res.lockNum.toString()
        this.platForm.monitorNum = res.monitorNum.toString()
        this.platForm.screenNum = res.screenNum.toString()
        this.platForm.totalNum = res.totalNum.toString()
        
      })
    },
    // 登录者管理的停车场列表
    getparkingLotListByLoginId(){
      this.$api.parkingLotListByLoginId({admin_id:this.admin_id}).then(res=>{
        this.options = res
      })
    },
    // 添加设备
    insertCar(){
      this.titles = '添加'
      this.isAdd = true
      this.dialogVisibleInsertCar = true
    },
    // 编辑
    editInfo(val){
      console.log(val)
      this.titles = '设备详情'
      this.isAdd = false
      this.addForm.device_id = val.device_id 
      this.addForm.device_type = val.device_type 
      this.addForm.device_number = val.device_number 
      this.addForm.parking_lot_id = val.parking_lot_id 
      this.addForm.parking_place_id = val.parking_place_id 
      this.addForm.gate_id = val.gate_id 
      if(this.addForm.device_type === 'LOCK'){
        this.getAllParkingPlaceList()
      } else if(this.addForm.device_type === 'ROAD_GATE' || this.addForm.device_type === 'SCREEN'){
        this.getGateListByParkingLotId()
      }
      else{
      }
      this.dialogVisibleInsertCar = true
      this.device()
    },
    // 删除
    delInfo(val){
      this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteDevice({admin_id:this.admin_id,device_id:val}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getOutData()
          this.getDeviceCount()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });  
    },
    // 确定
    deterress(){
      if (!this.addForm.device_type) {
        this.$message.error('请选择设备类别')
        return false
      }
      if (!this.addForm.device_number) {
        this.$message.error('请输入设备编号')
        return false
      }
      if (!this.addForm.parking_lot_id) {
        this.$message.error('请选择停车场')
        return false
      }
      if(this.addForm.device_type !== 'MONITOR'&&!this.addForm.parking_place_id&&!this.addForm.gate_id){
        this.$message.error('请选择绑定位置')
        return false
      }
       this.addForm.admin_id = this.admin_id
       this.$api.addDevice(this.addForm).then(res=>{
          this.$message({
            type:'success',
            message:'添加成功'
          })
          this.handleClose()
          this.getOutData()
          this.getDeviceCount()
        })
    },
    editress(){
      this.addForm.admin_id = this.admin_id
      if(this.addForm.device_type === 'LOCK'){
        this.addForm.gate_id = ''
      }else if(this.addForm.device_type === 'ROAD_GATE' || this.addForm.device_type === 'SCREEN'){
        this.addForm.parking_place_id = ''
      }
      else{
        this.addForm.gate_id = ''
        this.addForm.parking_place_id = ''
      }
       this.$api.editDevice(this.addForm).then(res=>{
          this.$message({
            type:'success',
            message:'编辑成功'
          })
          this.handleClose()
          this.getOutData()
          this.getDeviceCount()
        })
    },
    handleChange (val) {
      this.getUserList()
    },
    searchTime (val) {
      this.getUserList()
    },
    // 关闭弹框
    handleClose () {
      this.dialogVisibleInsertCar = false
      this.addForm = {
        device_type:'',
        device_number:'',
        parking_lot_id:'',
        parking_place_id:'',
        gate_id:''
      }
      this.optionParking = []
      this.isMonitor = false
      this.isRoadGate = false
      this.isParkingLock = false
    },
    getUserList () {
      this.searchObj.page = 1
      this.getOutData()
    },
    // 设备列表
    getOutData () {
      this.searchObj.admin_id = this.$store.state.adminId
      this.$api.deviceList(this.searchObj).then(res => {
        console.log(res)
        this.tableData = res.data
        this.total = res.page_info.total
      })
    },
    sizeChange (val) {
      this.searchObj.page = val
      this.getOutData()
    }
  }
}
</script>

<style scoped>
  .fontsb{
    margin-right:30px;
    font-size:15px;
  }
  .hta-input {
    width: 260px;
    margin-right: 23px;
  }
  .hm-date{
    margin: 0 15px;
    /*width: 136px;*/
  }
/*  弹框*/
  .font-col{
    color: #101010;
  }
  .bdcolor{
   color:red; 
  }
  .mright{
    margin-right:5px;
  }
</style>
